<template>
    <el-input
        v-model="inputValue"
        :style="{width: $attrs.width}"
        :disabled="disabled"
        :clearable="clearable"
        :show-word-limit="showWordLimit"
        :maxlength="maxlength"
        :placeholder="$attrs.placeholder || '请输入'"
        @input="changeInput"
    />
</template>
<script setup lang="ts">
    import { computed, PropType, ref, watch } from "vue";
    import { fnNumberInput } from "@/components/globalUtils/GInputNumber";

    const props = defineProps({
        modelValue: {
            type: [String, Number] as PropType<string | number>,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否显示 清空图标
        clearable: {
            type: Boolean,
            default: true
        },
        // 是否显示 可输入长度
        showWordLimit: {
            type: Boolean,
            default: false
        },
        // 最大长度
        maxlength: {
            type: [String, Number],
            default: ''
        },
        // 输入类型
        type: {
            type: String,
            default: ''
        },
        // 小数位数
        decimal: {
            type: [String, Number],
            default: 2
        },
        // 可输入最大值
        max: {
            type: [String, Number],
            default: 0
        }
    });

    // 可输入最大值
    const propsMax = computed(() => {
        if (+props.max > 0) {
            return (+props.max).toFixed(+props.decimal);
        } else {
            return '';
        }
    })

    const emit = defineEmits(['update:modelValue', 'input']);
    const inputModelValue = (val: string = '') => {
        emit('update:modelValue', val);
        emit('input', val);
    }
    let inputValue = ref<string | number>('');
    const changeInput = (value: string) => {
        const _val = inputValueRule(value);
        inputValue.value = _val;
        inputModelValue(_val ? (+_val).toString() : '');
    }
    const inputValueRule = (val: string = '') => {
        let _value: string = fnNumberInput(val, props.type, +props.decimal);
        if (propsMax.value) {
            if (propsMax.value.includes('.') && !_value.includes('.')) {
                // 最大值是小数 且 没有输入小数部分(截取整数部分对比)
                let _maxInteger = propsMax.value.slice(0, propsMax.value.indexOf('.'));
                _value = contrastInteger(_value, _maxInteger);
            } else {
                // 最大值是整数 或 最大值是小数 输入了小数部分
                _value = contrastInteger(_value, propsMax.value);
            }
        }
        return _value;
    }
    const contrastInteger = (value: string, maxValue: string) => {
        // 整数最大值
        // 长度截取
        if (value.length > maxValue.length) {
            value = value.slice(0, maxValue.length);
        }
        // 超过最大值 截取
        if (+value > +maxValue) {
            value = value.slice(0, maxValue.length - 1);
        }
        if (+value > +maxValue) {
            value = value.slice(0, value.length - 1);
        }
        return value;
    }

    watch(() => props.modelValue, (newValue: string | number) => {
        if (+newValue >= 0) {
            inputValue.value = inputValueRule(newValue as string);
        } else {
            inputValue.value = newValue;
        }
    }, {
        immediate: true
    });
</script>